<template>
	<div ref="deptInfo" style="padding: 0 0 53px 0;">
		<Form ref="deptInfoData" :model="deptInfoData" label-position="right" :label-width="110" :rules="deptInfo">
			<Card>
				<Row>
					<i-col span="12">
						<FormItem label="企业名称">
							{{deptInfoData.deptName}}
						</FormItem>
					</i-col>
					<i-col span="12">
						<FormItem label="企业类型" prop="transportCode">
							<i-select v-model="deptInfoData.transportCode" filterable placeholder="请选择企业类型" :label-in-value="true" @on-change="transportCodeFun" clearable>
								<Option v-for="item in deptTypeList" :value="item.code" :key="item.code">{{ item.value }}</Option>
							</i-select>
						</FormItem>
					</i-col>

					<i-col span="12">
						<FormItem label="营业执照号" prop="uniformSocialCreditCode">
							<i-input v-model="deptInfoData.uniformSocialCreditCode" placeholder="请填写营业执照号" clearable/>
						</FormItem>
						<FormItem label="营业执照图片">

							<Upload :before-upload="businessLicense" action="">
								<Button type="primary" icon="ios-cloud-upload-outline">上传营业执照</Button>
							</Upload>
							<div class="demo-upload-list">
								<viewer style="width: 100%;height: 100%;">
									<img :src="!!uniformSocialCreditImg.url?uniformSocialCreditImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
								</viewer>
							</div>
						</FormItem>
					</i-col>
					<i-col span="12">
						<FormItem label="经营许可证" prop="transportBusinessLicenseCode">
							<i-input v-model="deptInfoData.transportBusinessLicenseCode" placeholder="经营许可证" clearable/>
						</FormItem>
						<FormItem label="经营许可证图片">
							<Upload :before-upload="businessCertificate" action="">
								<Button type="primary" icon="ios-cloud-upload-outline">上传经营许可证</Button>
							</Upload>
							<div class="demo-upload-list">
								<viewer style="width: 100%;height: 100%;">
									<img :src="!!transportBusinessLicenseFile.url?transportBusinessLicenseFile.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
								</viewer>
							</div>
						</FormItem>
					</i-col>
					<i-col span="12">
						<FormItem label="法人姓名" prop="legalPerson">
							<i-input v-model="deptInfoData.legalPerson" placeholder="请填写法人姓名" clearable/>
						</FormItem>
					</i-col>
					<i-col span="12">
						<FormItem label="企业负责人" prop="personCharge">
							<i-input v-model="deptInfoData.personCharge" placeholder="请填写企业负责人" clearable/>
						</FormItem>
					</i-col>
					<i-col span="12">
						<FormItem label="企业负责人电话" prop="personChargePhone">
							<i-input v-model="deptInfoData.personChargePhone" placeholder="请填写企业负责人电话" clearable/>
						</FormItem>
					</i-col>
					<i-col span="12">
						<FormItem label="企业邮箱" prop="email">
							<i-input v-model="deptInfoData.email" placeholder="请填写企业邮箱" clearable/>
						</FormItem>
					</i-col>
					<i-col span="24">
						<FormItem label="所属区域" class="ivu-form-item-required">
							<Cascader :data="TrainPlaneographicArea" v-model="geographicArea" :load-data="loadData"
							          @on-change="TrainPlaneographicAreaFun"></Cascader>
						</FormItem>
					</i-col>
					<i-col span="24">
						<FormItem label="企业地址" prop="address">
							<i-input v-model="deptInfoData.address" placeholder="请填写企业地址" clearable/>
						</FormItem>
					</i-col>
				</Row>
			</Card>

		</Form>
		<div class="demo-drawer-footer">
			<!--<Button style="margin-right: 8px" @click="formOperationFun" v-if="!type">取消</Button>-->
			<Button style="margin-right: 8px" type="primary" @click="addSubmit('deptInfoData')">保存</Button>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['userInfoData'],//接收来自父组件的数据
		data() {
			return {
				deptInfoData: {},
				deptTypeList: [],//企业类型

				geographicArea: [],//地理区域选中的数据
				TrainPlaneographicArea: [{value: '130000', label: '河北省', children: [], loading: false}],//数据list

				uniformSocialCreditImg: {//营业执照图片
					data: null,
					url: '',
				},
				transportBusinessLicenseFile: {//经营许可证
					data: null,
					url: '',
				},
				deptInfo: {
					transportCode: [
						{required: true, message: '请选择企业类型', trigger: 'blur'}
					],
					uniformSocialCreditCode: [
						{required: true, message: '请填写营业执照号', trigger: 'blur'}
					],
					transportBusinessLicenseCode: [
						{required: true, message: '经营许可证', trigger: 'blur'}
					],
					legalPerson: [
						{required: true, message: '请填写法人姓名', trigger: 'blur'}
					],
					personCharge: [
						{required: true, message: '请填写企业负责人', trigger: 'blur'}
					],
					personChargePhone: [
						{required: true, message: '请填写企业负责人电话', trigger: 'blur'},
						{
							validator: (rule, value, callBack) => {
								if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
									callBack()
								} else {
									callBack('请输入手机号 或者 区号-座机号')
								}
							}, trigger: 'blur'
						}
					],
					email: [
						{required: true, message: '请填写企业邮箱', trigger: 'blur'},
						{type: 'email', message: '请填写正确的企业邮箱', trigger: 'blur'}
					],
//        address: [
//          {required: true, message: '请填写企业地址', trigger: 'blur'}
//        ],
				},
			}
		},
		beforeCreate() {//beforeCreate创建前状态

		},
		created() {//created创建完毕状态

		},
		beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

		},
		mounted() {//mounted 挂载结束状态
			var that = this;


			//企业信息
			that.axios.get(that.apiUrl.coreManagementDeptGetDeptInfo)
			.then(res => {
				if (!!res) {
					that.deptInfoData = res.data.data;
					that.geographicArea = [that.deptInfoData.provinceCode, that.deptInfoData.cityCode, that.deptInfoData.countyCode];

					that.transportBusinessLicenseFile.url = res.data.data.transportBusinessLicenseImg;//经营许可证
					that.uniformSocialCreditImg.url = res.data.data.uniformSocialCreditImg;//经营许可证
				}
			}).catch(err => {
				console.log('失败', err);
			})


			//企业类型
			that.axios.get(that.apiUrl.transportType)
			.then(res => {
				if (!!res) {
					that.deptTypeList = res.data.list;
				}
			}).catch(err => {
				console.log("失败", err)
			})
		},
		methods: {//执行的方法
			loadData(item, callback) {
				var that = this;
				item.loading = true;
				that.axios.get(that.apiUrl.coreManagementAreaList + item.value)
				.then(res => {
					if (!!res) {
						var children = [];
						res.data.list.forEach(function (k, i) {
							if (k.areaLv == 3) {
								children.push({value: k.areaCode, label: k.areaName})
							} else {
								children.push({value: k.areaCode, label: k.areaName, children: [], loading: false})
							}
						})
						item.children = children;
						item.loading = false;
						callback();
					}
				}).catch(err => {
					console.log('失败', err);
				})
			},
			transportCodeFun(e) {//企业类型
				if (!!e) {
					this.deptInfoData.transportValue = e.label;
				} else {
					this.deptInfoData.transportValue = "";
				}
			},
			TrainPlaneographicAreaFun(data) {//所属区域
//      this.confModi({provinceCode: data[0], cityCode: data[1], countyCode: data[2]})
				this.deptInfoData.provinceCode = data[0];
				this.deptInfoData.cityCode = data[1];
				this.deptInfoData.countyCode = data[2];
				//provinceCode  //省
				//cityCode  //市
				//countyCode //县区
			},
			businessLicense(file) {//营业执照图片
				var that = this;
				var type = file.type.split("/")[0];
				if (type == "image") {//图片
					that.uniformSocialCreditImg.url = window.URL.createObjectURL(file);
					that.uniformSocialCreditImg.data = file;
				} else {
					that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
				}
				return false;
			},
			businessCertificate(file) {//经营许可证图片
				var that = this;
				var type = file.type.split("/")[0];
				if (type == "image") {//图片
					that.transportBusinessLicenseFile.url = window.URL.createObjectURL(file);
					that.transportBusinessLicenseFile.data = file;
				} else {
					that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
				}
				return false;
			},
			//表单关闭
			formOperationFun() {
				this.$emit("closeFun")
			},
			addSubmit(formName) {//新增修改提交
				var that = this;
				that.$refs[formName].validate((valid) => {
					if (valid) {//正则判断使用
						that.deptInfoData.deptUuid = that.userInfoData.deptUuid;

						//所属区域
						if (!!!that.deptInfoData.provinceCode) {
							that.$Message.info('请选择所属区域');
							return false;
						}


						var data = that.deptInfoData;
						var deptInfoData = new FormData();

						//删除JSON字段
						delete data.updateTime;
						delete data.createTime;

						for (var key in data) {
							if (!!data[key]) {
								deptInfoData.append(key, data[key]);
							}
						}

						//营业执照图片
						if (!!that.uniformSocialCreditImg.data) {//选择了图片
							deptInfoData.append('uniformSocialCreditFile', that.uniformSocialCreditImg.data);
						}

						//经营许可证图片
						if (!!that.transportBusinessLicenseFile.data) {//选择了图片
							deptInfoData.append('transportBusinessLicenseFile', that.transportBusinessLicenseFile.data);
						}

						that.$Spin.show();
						that.axios.post(that.apiUrl.coreManagementDeptUpdateDeptInfo, deptInfoData, {headers: {'Content-Type': "application/x-www-form-urlencoded"}})
						.then(res => {
							that.$Spin.hide();
							if (!!res) {
								that.$Message.success('企业信息修改成功');
								that.$emit("closeFun")
							}
						}).catch(err => {
							console.log('失败', err);
						})
					} else {
						that.$Message.error('请正确填写表单');
					}
				})

			},
		},
		watch: {//监听

		},
		beforeUpdate() {//beforeUpdate 更新前状态

		},
		updated() {//updated 更新完成状态

		},
		beforeDestroy() {//beforeDestroy 销毁前状态

		},
		destroyed() {//destroyed 销毁完成状态

		}
	}
</script>
<style lang="less" scoped>
	.demo-drawer-footer {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top: 1px solid #e8e8e8;
		padding: 10px 16px;
		text-align: right;
		background: #fff;
	}

	.demo-upload-list {
		display: inline-block;
		width: 120px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		border: 1px solid rgba(0, 0, 0, .2);
		margin-right: 4px;
	}

	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}

	.demo-upload-list-cover {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}

	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}

	.demo-upload-list-cover i {
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}
</style>


